<template>
  <el-form
    :model="form"
    ref="formRef"
    class="box-from"
    label-width="95px"
    label-position="right"
  >
    <el-form-item label="省市区">
      <el-select
        v-model="form.province"
        style="width: 180px"
        placeholder="请选择省份"
        clearable
        @change="provinceChange"
        @clear="provinceClear"
      >
        <el-option
          v-for="item in province"
          :key="item.code"
          :label="item.value"
          :value="item.value"
        />
      </el-select>
      <el-select
        v-model="form.city"
        style="width: 180px; margin-left: 5px"
        placeholder="请选择市"
        clearable
        @change="cityChange"
        :disabled="form.province === ''"
        @clear="cityClear"
      >
        <el-option
          v-for="item in city"
          :key="item.code"
          :label="item.value"
          :value="item.value"
        />
      </el-select>
      <el-select
        v-model="form.area"
        style="width: 180px; margin-left: 5px"
        placeholder="请选择区"
        clearable
        :disabled="form.city === ''"
      >
        <el-option
          v-for="item in area"
          :key="item.code"
          :label="item.value"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="详细地址">
      <el-input
        style="width: 500px"
        type="textarea"
        v-model="form.address"
        placeholder="请输入详细地址"
        clearable
      />
      <el-button @click="addressMap" style="margin-left: 5px"
        >地图跳转</el-button
      >
    </el-form-item>
    <el-form-item label="地图选择">
      <!-- <Map :addressClick="addressClick" ref="mapRef"></Map> -->
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { reactive, ref, toRefs, onMounted } from "vue";
// import { provinceData } from "./index";

const state = reactive({
  // 表单
  // province: provinceData,
  city: [] as any,
  area: [] as any,
  form: {
    province: "",
    city: "",
    area: "",
    address: "",
  },
});

const { form, province, city, area } = toRefs(state);

const mapRef = ref("") as any;

onMounted(() => {
  // 这里传后台获取的经纬度
  mapRef.value.fixed(100.179253, 27.096143);
});

// 省份
function provinceChange(value: any) {
  state.province.forEach((item) => {
    if (item.value === value) {
      state.city = item.children;
    }
  });
}

// 市
function cityChange(value: any) {
  state.province.forEach((item) => {
    if (item.value === state.form.province) {
      item.children.forEach((text) => {
        if (text.value === value) {
          state.area = text.children;
        }
      });
    }
  });
}

// 省清空
function provinceClear() {
  state.form.city = "";
  state.form.area = "";
}

// 市清空
function cityClear() {
  state.form.area = "";
}

// 详细地址跳转地图
function addressMap() {
  mapRef.value.toGetCoordinate(state.form.address);
}

// 地图选位置
// 把获取的信息同步到三级联动
function addressClick(item: any, lng: any, lat: any) {
  if (item.regeocode.addressComponent.city === "") {
    state.form.city = item.regeocode.addressComponent.province;
  } else {
    state.form.city = item.regeocode.addressComponent.city;
  }
  state.form.province = item.regeocode.addressComponent.province;
  state.form.area = item.regeocode.addressComponent.district;
  state.form.address = item.regeocode.formattedAddress;
  state.province.forEach((item) => {
    if (item.value === state.form.province) {
      state.city = item.children;
      item.children.forEach((text) => {
        if (text.value === state.form.city) {
          state.area = text.children;
        }
      });
    }
  });
}
</script>
